<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- Morris -->
    <link href="css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
    <!-- Gritter -->
    <link href="js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/calender.css">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <img style="width: 100%;" src="img/home/banner.png" alt="">
    <div class="floatClear">
        <div class="floatLeft">
            <div class="floatClear">
                <a class="J_menuItem" href="biologicalWarning.html" data-name="生信预警">
                    <div class="dataItem indexMarginTop floatLeft">
                        <div class="dataItemName">生信预警</div>
                        <div class="dataItemNum">150000</div>
                        <img class="dataItemImg" src="img/home/indexItemImg1.png" alt="">
                    </div>
                </a>
                <a class="J_menuItem" href="interpretationTask.html" data-name="解读任务">
                    <div class="dataItem dataItem2 indexMarginTop floatLeft">
                        <div class="dataItemName">待解读位点</div>
                        <div class="dataItemNum">150000</div>
                        <img class="dataItemImg" src="img/home/indexItemImg2.png" alt="">
                    </div>
                </a>
            </div>
            <div class="floatClear">
                <a class="J_menuItem" href="siteAudit.html" data-name="位点审核">
                    <div class="dataItem dataItem3 indexMarginTop floatLeft">
                        <div class="dataItemName">待审核位点</div>
                        <div class="dataItemNum">150000</div>
                        <img class="dataItemImg" src="img/home/indexItemImg3.png" alt="">
                    </div>
                </a>
                <a class="J_menuItem" href="reportManage.html" data-name="报告管理">
                    <div class="dataItem dataItem4 indexMarginTop floatLeft">
                        <div class="dataItemName">待出报告</div>
                        <div class="dataItemNum">150000</div>
                        <img class="dataItemImg" src="img/home/indexItemImg4.png" alt="">
                    </div>
                </a>
            </div>
        </div>
        <div class="floatRight">
            <!--日历-->
            <div class="calendarBox indexMarginTop">
                <div id='schedule-box' class="boxshaw"></div>
                <div class="calendarBottom">今天</div>
            </div>
        </div>
    </div>
    <div class="floatClear">
        <div class="runSampleContainer indexMarginTop">
            <div class="runSampleNumBox floatLeft">
                <img src="img/home/runSampleBg.png" class="runSampleBg" alt="">
                <img src="img/home/runSampleImg.png" class="runSampleImg" alt="">
                <div class="runSampleNumContent">
                    <div class="runSampleNum">150000</div>
                    <div class="runSampleNumText">运行中样本</div>
                </div>
            </div>
            <div class="runSampleTable floatLeft">
                <div class="runSampleTitleBox floatClear">
                    <img src="img/home/runSampleIcon.png" class="runSampleTitleIcon floatLeft" alt="">
                    <div class="runSampleTitleText floatLeft">运行中样本</div>
                    <a class="runSampleTitleMore floatRight J_menuItem" href="sampleManage.html" data-name="样本信息管理">查看全部></a>
                </div>
                <div class="runSampleTableHeader floatClear">
                    <div class="floatLeft runSampleHeaderItem">样本批次号</div>
                    <div class="floatLeft runSampleHeaderItem">ON号</div>
                    <div class="floatLeft runSampleHeaderItem">NB号</div>
                    <div class="floatLeft runSampleHeaderItem">姓名</div>
                    <div class="floatLeft runSampleHeaderItem">生信状态</div>
                    <div class="floatLeft runSampleHeaderItem">生信过程</div>
                    <div class="floatLeft runSampleHeaderItem">生信结果</div>
                </div>
                <div class="runSampleTableBody">
                    <!--运行中样本数据循环-->
                    <div class="runSampleTableLine floatClear">
                        <div class="floatLeft runSampleTableItem">1545646457</div>
                        <div class="floatLeft runSampleTableItem">65657612</div>
                        <div class="floatLeft runSampleTableItem">65657612</div>
                        <div class="floatLeft runSampleTableItem">王芳芳</div>
                        <div class="floatLeft runSampleTableItem">状态</div>
                        <div class="floatLeft runSampleTableItem">状态</div>
                        <div class="floatLeft runSampleTableItem">状态</div>
                    </div>
                    <div class="runSampleTableLine floatClear">
                        <div class="floatLeft runSampleTableItem">1545646457</div>
                        <div class="floatLeft runSampleTableItem">65657612</div>
                        <div class="floatLeft runSampleTableItem">65657612</div>
                        <div class="floatLeft runSampleTableItem">王芳芳</div>
                        <div class="floatLeft runSampleTableItem">状态</div>
                        <div class="floatLeft runSampleTableItem">状态</div>
                        <div class="floatLeft runSampleTableItem">状态</div>
                    </div>
                    <div class="runSampleTableLine floatClear">
                        <div class="floatLeft runSampleTableItem">1545646457</div>
                        <div class="floatLeft runSampleTableItem">65657612</div>
                        <div class="floatLeft runSampleTableItem">65657612</div>
                        <div class="floatLeft runSampleTableItem">王芳芳</div>
                        <div class="floatLeft runSampleTableItem">状态</div>
                        <div class="floatLeft runSampleTableItem">状态</div>
                        <div class="floatLeft runSampleTableItem">状态</div>
                    </div>
                    <div class="runSampleTableLine floatClear">
                        <div class="floatLeft runSampleTableItem">1545646457</div>
                        <div class="floatLeft runSampleTableItem">65657612</div>
                        <div class="floatLeft runSampleTableItem">65657612</div>
                        <div class="floatLeft runSampleTableItem">王芳芳</div>
                        <div class="floatLeft runSampleTableItem">状态</div>
                        <div class="floatLeft runSampleTableItem">状态</div>
                        <div class="floatLeft runSampleTableItem">状态</div>
                    </div>
                </div>
            </div>
    </div>
</div>

<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/global.js?v=3.3.6"></script>
<!--日历js-->
<script src="js/calendar.js"></script>
<script>
    $(document).ready(function () {
        var mySchedule = new Schedule({
            el: '#schedule-box',
            clickCb: function (y,m,d) {
                document.querySelector('.calendarBottom').innerHTML = y+'-'+m+'-'+d
            },
            nextMonthCb: function (y,m,d) {
                document.querySelector('.calendarBottom').innerHTML = y+'-'+m+'-'+d
            },
            nextYeayCb: function (y,m,d) {
                document.querySelector('.calendarBottom').innerHTML = y+'-'+m+'-'+d
            },
            prevMonthCb: function (y,m,d) {
                document.querySelector('.calendarBottom').innerHTML = y+'-'+m+'-'+d
            },
            prevYearCb: function (y,m,d) {
                document.querySelector('.calendarBottom').innerHTML = y+'-'+m+'-'+d
            }
        });


        //滚动到指定选项卡
        function scrollToTab(element) {
            var marginLeftVal = calSumWidth($(element).prevAll()), marginRightVal = calSumWidth($(element).nextAll());
            // 可视区域非tab宽度
            var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
            //可视区域tab宽度
            var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
            //实际滚动宽度
            var scrollVal = 0;
            if ($(".page-tabs-content").outerWidth() < visibleWidth) {
                scrollVal = 0;
            } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
                if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
                    scrollVal = marginLeftVal;
                    var tabElement = element;
                    while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
                        scrollVal -= $(tabElement).prev().outerWidth();
                        tabElement = $(tabElement).prev();
                    }
                }
            } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
                scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
            }
            $('.page-tabs-content').animate({
                marginLeft: 0 - scrollVal + 'px'
            }, "fast");
        }
        //通过遍历给菜单项加上data-index属性
        $(".J_menuItem").each(function (index) {
            if (!$(this).attr('data-index')) {
                $(this).attr('data-index', index);
            }
        });
        //计算元素集合的总宽度
        function calSumWidth(elements) {
            var width = 0;
            $(elements).each(function () {
                width += $(this).outerWidth(true);
            });
            return width;
        }
        function menuItem() {
            // 获取标识数据
            var dataUrl = $(this).attr('href'),
                dataIndex = $(this).data('index'),
                menuName = $.trim($(this).attr("data-name")),
                flag = true;
            if (dataUrl == undefined || $.trim(dataUrl).length == 0)return false;

            // 选项卡菜单已存在
            $('.J_menuTab',window.parent.document).each(function () {
                if ($(this).data('id') == dataUrl) {
                    if (!$(this).hasClass('active')) {
                        $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
                        scrollToTab(this);
                        // 显示tab对应的内容区
                        $('.J_mainContent .J_iframe',window.parent.document).each(function () {
                            if ($(this).data('id') == dataUrl) {
                                $(this).show().siblings('.J_iframe').hide();
                                return false;
                            }
                        });
                    }
                    flag = false;
                    return false;
                }
            });
            // 选项卡菜单不存在
            if (flag) {
                var str = '<a href="javascript:;" class="active J_menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
                $('.J_menuTab',window.parent.document).removeClass('active');
                // 添加选项卡对应的iframe
                var str1 = '<iframe class="J_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
                $('.J_mainContent',window.parent.document).find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);
                // 添加选项卡
                $('.J_menuTabs .page-tabs-content',window.parent.document).append(str);
                scrollToTab($('.J_menuTab.active',window.parent.document));
            }
            return false;
        }
        $('.J_menuItem').on('click', menuItem);
    });
</script>
</body>
</html>
